<template>
  <div>
    <a-tabs
        v-model:activeKey="activeKey"
        tab-position="left"
        type="card"
        @tabScroll="callback"
    >
      <a-tab-pane key="1" >
        <template #tab>
          <div class="vertical-tab">命令管理</div>
        </template>
        命令管理
      </a-tab-pane>
      <a-tab-pane key="2" >
        <template #tab>
          <div class="vertical-tab">命令搜索</div>
        </template>
        命令搜索
      </a-tab-pane>
      <a-tab-pane key="3" >
        <template #tab>
          <div class="vertical-tab">小易</div>
        </template>
        小易
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const activeKey = ref(1);
const callback = val => {
  console.log(val);
};
</script>
<style scoped>
  :deep(.ant-tabs-nav .ant-tabs-tab .vertical-tab) {
    writing-mode: vertical-rl; /* 纵向排列文字 */
    display: inline-block; /* 确保文字垂直排列 */
  }
</style>